<template>
    <div id="entry-standard-library">
        <el-tabs v-model="editableTabsValue">
            <el-tab-pane label="指标中心" name="合规条款及规则">
                <ComplianceClause @emitFileSourceCategoryData="emitFileSourceCategoryData" ref="complianceClause"></ComplianceClause>
            </el-tab-pane>
            <el-tab-pane label="操作记录" name="操作记录">
                <OperatingRecord :fileSourceCategoryData="fileSourceCategoryData" :refreshKey="refreshKey"></OperatingRecord>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import ComplianceClause from './entry-standard-library/compliance-clause.vue';
import OperatingRecord from './entry-standard-library/operating-record.vue';
@Component({
    name: 'EntryStandardLibrary',
    components: {
        ComplianceClause,
        OperatingRecord,
    },
})
export default class EntryStandardLibrary extends Vue {
    editableTabsValue: string = '合规条款及规则';
    fileSourceCategoryData = [];
    refreshKey = 0;
    defaultActiveTab: string = '';
    defaultFundCode: string = '';
    isFirst: boolean = true;
    clauseCode = '';

    created() {
        const location: any = window.location.href;
        const arr = location.substr(location.indexOf('?') + 1).split('&');

        let obj = {};
        arr.map(item => {
            let arrays = item.split('=');
            this.$set(obj, arrays[0], arrays[1]);
        });

        this.defaultActiveTab = obj['tab'] || 'source';
        sessionStorage.setItem('jumpParam-defaultActiveTab', this.defaultActiveTab);

        let fundCode = obj['fundCode'] || '';
        this.defaultFundCode = fundCode;
        if (this.defaultFundCode) {
            sessionStorage.setItem('jumpParam-defaultFundCode', this.defaultFundCode);
        }

        this.clauseCode = obj['clauseCode'] || '';
        if (this.clauseCode) {
            sessionStorage.setItem('jumpParam-clauseCode', this.clauseCode);
        }

        this.editableTabsValue = '合规条款及规则';
        console.log('进入合规来源==', obj, this.defaultActiveTab, fundCode, this.clauseCode);

        window.addEventListener('message', this.refresh);
    }

    destroyed() {
        window.removeEventListener('message', this.refresh);
    }

    refresh(event) {
        if (event.data === 'Refresh') {
            console.log('vue-Refresh!');
            window.location.reload();
        }
    }

    /**
     * 弃用
     */
    emitFileSourceCategoryData(param1, param2) {
        console.log('emitFileSourceCategoryData', param1, param2);
        this.fileSourceCategoryData = [];
        this.fileSourceCategoryData.push(param1);
        this.refreshKey = param2;
        if (this.isFirst && this.defaultFundCode) {
            this.isFirst = false;
            let fundCode = this.defaultFundCode;
            this.$nextTick(() => {
                let $ref1 = this.$refs.complianceClause as any;
                console.log($ref1, '$ref1');

                let $ref2 = $ref1?.$refs['left-tree'] as any;
                console.log($ref2, '$ref1');
                let $ref3 = $ref2?.$refs.treeFile as any;
                console.log($ref3, '$ref1');
                if ($ref3) {
                    // $ref2.expandedKeyFile = [fundCode]; // 展开节点 ~~改了
                    // $ref1.currentNodeFilekey = fundCode; // 选中节点 ~~改了
                    // $ref1.goClauseCode = this.clauseCode; ~~改了
                    // $ref1.goCurrentNodeFilekey = fundCode; ~~改了
                    // $ref1.goFirst = true; ~~改了
                    console.log('hzj000', $ref1.goClauseCode, $ref1.goCurrentNodeFilekey, $ref1.goFirst, '===!', this.clauseCode, fundCode);
                    this.$nextTick(() => {
                        $ref3.setCurrentKey(fundCode); // 选中高亮效果? 不知道有没有用
                        let node = $ref3.getNode(fundCode);
                        console.log($ref3.getCurrentNode(), node, 'node----------');
                        node && $ref1.handleNodeClick(node.data, node);
                        $ref2.activeName = 'File';
                        // $ref1.activeTab = this.defaultActiveTab; ~~改了
                    });
                }
            });
        }
    }
}
</script>
<style lang="scss" scoped>
@import '../../style/cmschina.scss';

#entry-standard-library {
    height: 100%;
    // padding-top: 10px;
    min-width: 1250px;
    // width: 1250px;
}

/deep/ .el-tabs > .el-tabs__header .el-tabs__item {
    // border: 1px solid #e4e7ed;
    // border-bottom: none;
    padding: 0 14px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    &:nth-child(2) {
        padding-left: 14px;
    }
    &:last-child {
        padding-right: 14px;
    }
}

/deep/ .el-tabs {
    height: 100%;
    .el-tabs__nav {
        // border: none;
        // .is-active {
        //     border-color: #409eff;
        //     border-bottom: 2px solid #409eff;
        // }
    }
    .el-tabs__content {
        // padding: 20px;
        height: calc(100% - 35px);
        overflow: auto;
        .el-tab-pane {
            color: #333;
            height: 100%;
            overflow: auto;
        }
    }
}

/deep/ .el-tabs .el-tabs__nav .el-tabs__item span {
    border-right: 0px solid #fff;
}

/deep/ .el-tabs .el-tabs__nav .el-tabs__item {
    height: 47px;
    line-height: 47px;
}
</style>
